<template>
	<view class="page">
		<view class="flex content">
			<image :src="buildImgUrl(detail.icon)" class="foodImg"></image>
			<view>
				<view>{{detail.name}}（{{detail.shopName}}）</view>
				<view class="flex feedback" v-if="isAppraise=='Y'">
					<view class="photo">图文反馈</view>
					<view>1-3图+文字</view>
				</view>
				<view class="flex organization">
					<image v-if="detail.platformType==2 || detail.platformType==5" src="../../static/index/mtLogo.png"
						mode="" class="full"></image>
					<image v-if="detail.platformType==1" src="../../static/index/blueOrdering.png" mode="" class="full">
					</image>
					<image v-if="detail.platformType==3 || detail.platformType==9" src="../../static/index/392.png"
						mode="" class="full"></image>
					<image v-if="detail.platformType==4" src="../../static/index/391.png" mode="" class="full">
					</image>
					<image v-if="detail.platformType==6" src="../../static/index/393.png" mode="" class="full">
					</image>
					<image v-if="detail.platformType==7" src="../../static/index/394.png" mode="" class="full">
					</image>
					<image v-if="detail.platformType==8" src="../../static/index/395.png" mode="" class="full">
					</image>
					<view>{{detail.tags}}</view>
				</view>
			</view>
		</view>
		<view class="tishi">
			评价截图/用餐凭证请于6小时内上传，超时订单将自动取消，无法获得平台返利
		</view>
		<view class="flex activityFlow">
			<view class="activityFlowTitle">活动流程</view>
			<steps :options="list2" active-color="#007AFF" :active="active" :objData="detail" direction="column"
				@codeAlert="codeAlert" ref="steps" @navWx="navWX" />
		</view>
		<view class="flex foot">
			<view class="applyBtn" @click="applyClick">提交凭证</view>
		</view>
		<alert :popupMask="popupMask" :codeImg="codeImg" :content="content" :subSuccess="subSuccess" :type="type"
			@close="close" @sub="sub" ref="alert"></alert>
	</view>
</template>

<script>
	import steps from '@/components/steps/components/uni-steps/uni-steps.vue'
	import alert from '@/components/alert.vue'
	import {
		queryById,
		taskDetail,
		uploadOrderAndProofImage
	} from '../../common/api.js'
	import {
		buildImgUrl
	} from "../../utils/me.js";
	export default {
		components: {
			steps,
			alert
		},
		data() {
			return {
				buildImgUrl,
				active: 1,
				list2: [{
					title: '买家下单',
					desc: '2018-11-11'
				}, {
					title: '卖家发货',
					desc: '2018-11-12'
				}, {
					title: '买家签收',
					desc: '2018-11-13'
				}, {
					title: '交易完成',
					desc: '2018-11-14'
				}],
				popupMask: false,
				codeImg: false,
				subSuccess: false,
				type: Number,
				content: {
					img: '../../static/index/mtLogo.png',
					Text: '点击长按图片进店点餐',
					type: 0
				},
				detail: {},
				id: '',
				orderType: 0,
				isAppraise: ''
			}
		},
		onLoad(option) {
			this.orderType = option.orderType || 0
			this.id = option.id
			this.queryById()
		},
		methods: {
			navWX() {
				if (this.detail.platformType == 2) { //美团
					uni.navigateToMiniProgram({
						appId: 'wxde8ac0a21135c07d',
						path: 'waimai-mt/pages/web-view/web-view.html?redirectUrl=https%3A%2F%2Fmarket.waimai.meituan.com%2Fgd2%2Fwm%2F3oMg3O%3Fel_biz%3Dwaimai%26el_page%3Dgundam.loader%26gundam_id%3D3oMg3O%26tenant%3Dgundam%26pageSource%3D301%26resource_id%3D40422%26kingkong_channel_mark%3Dgourmet_food%26wm_dtype%3DM2012K11AC%26open_id%3DoJVP50FfRsE07EbKpT0dnT9We5_s%26user_id%3D2938655894%26token%3DAgFvIujjl1lSVR9nZBt1MEkqkITTF7ydEzZBNZjUScE4nXyhBetbbm3PRnWueTOrYlKoNkUslNh0wAAAAABMJAAA2ItIwYeMp1mJczHPzQbKioFadJUBsOJpAnHzsZm2IcgelzefD6vOTsoxN4tD6-aT%26latitude%3D33268292%26longitude%3D113029472&wxapp_force_loc=1',
						envVersion: "release",
						success: res => {
							// 打开成功
							console.log("打开成功", res);
						},
						fail: err => {
							console.log(err);
						}
					})
				} else {
					uni.navigateToMiniProgram({
						appId: 'wxece3a9a4c82f58c9',
						path: 'ele-recommend-price/pages/guest/index?inviterId=782101a9&chInfo=ch_wechat_chsub_CopyLink&_ltracker_f=tjyj1_wx_fuceng',
						envVersion: "release",
						success: res => {
							// 打开成功
							console.log("打开成功", res);
						},
						fail: err => {
							console.log(err);
						}
					})
				}
			},
			applyClick() {
				if (!this.$refs.steps.orderNoImage) return this.$toast('请上传订单图片')
				// if (!this.$refs.steps.orderProofImage) return this.$toast('请上传评价图片')
				uploadOrderAndProofImage({
					enrollId: this.id,
					orderNoImage: this.$refs.steps.orderNoImage,
					orderProofImage: this.$refs.steps.orderProofImage
				}).then(res => {
					this.type = res.code == 500 ? 0 : 1
					this.popupMask = true
					this.subSuccess = true
					setTimeout(() => {
						this.popupMask = false
						this.subSuccess = false
						if (this.type == 1) {
							uni.navigateBack({
								delta: 1
							})
						}
					}, 1000)
				})
			},
			getDiffTime(new_date, old_date) {
				var subtime = (new_date - old_date) / 1000; //计算时间差,并将毫秒转化为秒
				this.detail.mins = 30 - (parseInt(subtime % 3600 / 60)); //分钟 - (day*24)  以60秒为一整份  取余 剩下秒数 秒数/60就是分钟数
				this.detail.secs = 60 - (parseInt(subtime % 60)); //以60秒为一整份  取余  剩下秒数
				// return "时间差是：" + days + "天 " + hours + "小时 " + mins + "分钟 " + secs + "秒 ";
			},
			taskDetail(id, result) {
				taskDetail({
					id: id
				}).then(res => {
					this.detail = Object.assign(this.detail, res.result)

					this.$refs.steps.orderNoImage = result.orderProve
					this.$refs.steps.orderType = this.orderType
					this.$forceUpdate()
					this.$refs.steps.timeUpdate()
				})
			},
			queryById() {
				queryById({
					id: this.id
				}).then(res => {
					this.isAppraise = res.result.isAppraise
					this.taskDetail(res.result.taskId, res.result)
					this.getDiffTime(new Date().getTime(), new Date(res.result.createTime).getTime() + 1800)
				})
			},
			close() {
				this.popupMask = false
				this.codeImg = false
			},
			codeAlert() {
				this.content = {
						img: buildImgUrl(this.detail.shopRccode),
						Text: '点击长按图片进店点餐',
						type: 0
					},
					this.popupMask = true
				this.codeImg = true
			}
		}
	}
</script>

<style scoped>
	.activityFlowTitle {
		font-family: Source Han Sans CN;
		font-size: 32rpx;
		font-weight: bold;
		line-height: normal;
		letter-spacing: 0em;
		font-variation-settings: "opsz" auto;
		color: #333333;
		text-align: center;
		margin-bottom: 18rpx;
	}

	.activityFlow {
		width: 662rpx;
		height: auto;
		margin: 26rpx 18rpx;
		border-radius: 20rpx;
		opacity: 1;
		background: #FFFFFF;
		padding: 26rpx 0 0 56rpx;
		flex-direction: column;
	}

	.photo {
		width: 168rpx;
		height: 44rpx;
		border-radius: 18rpx;
		opacity: 1;
		background: #FDCC45;
		color: #FFFFFF;
		text-align: center;
		margin-right: 30rpx;
	}

	.feedback {
		font-family: Source Han Sans CN;
		font-size: 28rpx;
		font-weight: normal;
		line-height: normal;
		letter-spacing: 0em;
		font-variation-settings: "opsz" auto;
		color: #333333;
		margin: 24rpx 0 22rpx;
		width: 390rpx;
		height: 44rpx;
		border-radius: 18rpx;
		opacity: 1;
		box-sizing: border-box;
		border: 2rpx solid #FDCC45;
	}

	.full {
		width: 44rpx;
		height: 44rpx;
		margin-right: 12rpx;
	}

	.foodImg {
		width: 186rpx;
		height: 186rpx;
		margin-right: 26rpx;
	}

	.content {
		width: 682rpx;
		height: 186rpx;
		border-radius: 20rpx;
		opacity: 1;
		background: #FFFFFF;
		padding: 34rpx 18rpx 30rpx;
		margin: 20rpx 18rpx;
	}

	.organization {
		font-family: Source Han Sans CN;
		font-size: 28rpx;
		font-weight: normal;
		line-height: normal;
		letter-spacing: 0em;
		font-variation-settings: "opsz" auto;
		align-items: center;
		margin-top: 20rpx;
	}

	.applyBtn {
		width: 496rpx;
		height: 86rpx;
		border-radius: 52rpx;
		opacity: 1;
		background: #FD4545;
		font-family: Source Han Sans CN;
		font-size: 32rpx;
		font-weight: bold;
		line-height: 86rpx;
		letter-spacing: 0em;
		font-variation-settings: "opsz" auto;
		color: #FFFFFF;
		text-align: center;
	}

	.foot {
		position: fixed;
		left: 0rpx;
		bottom: 0rpx;
		width: 100%;
		height: 140rpx;
		background: #fff;
		align-items: center;
		justify-content: center;
		border-top: 2rpx solid #EDEDED;
	}

	.page {
		background: #F7F7F7;
		padding-bottom: 150rpx;
	}

	page {
		background: #F7F7F7;
		padding-bottom: 150rpx;
	}

	.tishi {
		color: red;
		width: 100%;
		padding: 3vw;
		font-weight: 600;
		box-sizing: border-box;
	}
</style>